<template>
<<<<<<< HEAD
	<div class="search">
		<form action="" class="search_form">
			<input type="text" class='search_text' placeholder="搜索歌曲、歌单、专辑" ref='input'>
			<button class='btn' @click.prevent='search'>搜索</button>
		</form>
		<div v-show='flag'>
			<search-list :searchSongs='searchSongs'></search-list>
		</div>
	</div>
</template> 

<script>
    import searchList from 'components/search-list/search-list';
    import { createSong } from 'assets/js/songs'
	import { search } from 'api/search'
	import htmlentities from 'assets/js/encode'
	export default {
		data(){
			return {
				flag:false,
				searchSongs:[]
			}
		},
		mounted(){
			// console.log(String.fromCharCode(&#53664;))
		},
		methods:{
			search(){
				var world = this.$refs.input.value;
				search(world).then((res)=>{
					this.searchSongs = [];
					//整理数据
					var arr = res.data.song.list;
					for(var i=0;i<arr.length;i++){
						var obj = createSong(arr[i]);
						// for (item in obj){
							
						// }
						this.searchSongs.push(obj)
					}
					console.log(this.searchSongs);
					this.flag = true;
				})
			}
		},
		components:{
			searchList
		}
	}
</script>

<style scoped lang="less">
	@import '~assets/less/variable';
	
	.search{
		overflow: hidden;
		.search_form{
			width:100%;
			height:36px;
			padding:10px 15px;
			.search_text{
				height:100%;
				box-sizing: border-box;
				width:75%;
				background-color: @color-highlight-background;
				border-radius: 5px;
				outline: 0;
				padding:0 15px;
				color:@color-text-l;
				font-size:@font-size-medium;
			}
			.btn{
				width:18%;
				height: 100%;
				border:0;
				outline: 0;
				background:none;
				font-size:@font-size-medium-x;
				color:@color-text-l;
			}
		}
	}
=======
  <div class="rank" ref="rank">
    搜索界面
  </div>
</template>

<script>

  export default {
   
  }
</script>

<style scoped lang="less">
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
</style>